<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>API 参考 | Vue Router</title>
    <meta name="description" content="Vue.js 的官方路由">
    <link rel="stylesheet" href="static/css/style.720cf281.css">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/Home.50302e7a.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/ui-custom.4cf347f1.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/ui-custom.8de93204.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/AlgoliaSearchBox.80d79d6b.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/app.47b74ea6.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/zh_api_index.md.9540fde2.lean.js">
    
    <link rel="icon" href="static/picture/logo.png">
  <meta name="wwads-cn-verify" content="7e7757b1e12abcb736ab9a754ffb617a">
  <script src="static/js/thesemetrics@latest.js" async=""></script>
  <meta name="twitter:title" content="API 参考 | Vue Router">
  <meta property="og:title" content="API 参考 | Vue Router">
  </head>
  <body>
    <div id="app"><div class="main-container" data-v-46b24580=""><!----><!--[--><div class="theme"><header class="nav-bar" data-v-675d8756=""><div class="sidebar-button" data-v-675d8756=""><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewbox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class=""></path></svg></div><a class="nav-bar-title" href="index1.html" aria-label="Vue Router, back to home" data-v-675d8756="" data-v-4a583abe=""><!----> Vue Router</a><div class="flex-grow" data-v-675d8756=""></div><div class="nav" data-v-675d8756=""><nav class="nav-links" data-v-675d8756="" data-v-eab3edfe=""><!--[--><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item" href="index2.html" data-v-b8818f8c="">教程 <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item active" href="" data-v-b8818f8c="">API 参考 <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">v4.x</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item isExternal" href="index4.html" target="_blank" rel="noopener noreferrer" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">v3.x</span><span class="icon" data-v-bbc27490=""><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-bbc27490=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">更新日志 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">选择语言</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="index8.html" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">English</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item active" href="" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">中文</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav></div><!--[--><!--[--><div class="algolia-search-box" id="docsearch"></div><!--]--><!--]--></header><aside class="sidebar" data-v-83e92a68=""><nav class="nav-links nav" data-v-83e92a68="" data-v-eab3edfe=""><!--[--><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item" href="index2.html" data-v-b8818f8c="">教程 <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item active" href="" data-v-b8818f8c="">API 参考 <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">v4.x</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item isExternal" href="index4.html" target="_blank" rel="noopener noreferrer" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">v3.x</span><span class="icon" data-v-bbc27490=""><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-bbc27490=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">更新日志 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">选择语言</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="index8.html" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">English</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item active" href="" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">中文</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav><!--[--><!--[--><div class="sponsors sponsors-top" data-v-46b24580=""><span data-v-46b24580="">Platinum Sponsors</span><!--[--><a href="javascript:;" target="_blank" rel="noopener" data-v-46b24580=""><img src="https://posva-sponsors.pages.dev/logos/fincliplogo_black_svg.svg" alt="Finogeeks" data-v-46b24580=""></a><!--]--></div><!--]--><!--]--><ul class="sidebar-links" data-v-83e92a68=""><!--[--><li class="sidebar-link"><a class="sidebar-link-item" href="#router-link-props">&lt;router-link&gt; Props</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#to">to</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#replace">replace</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#active-class">active-class</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#aria-current-value">aria-current-value</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#custom">custom</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#exact-active-class">exact-active-class</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#router-link-的-v-slot">&lt;router-link&gt; 的 v-slot</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#示例：将激活的-class-应用在外层元素">示例：将激活的 class 应用在外层元素</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#router-view-props">&lt;router-view&gt; Props</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#name">name</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#route">route</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#router-view-的-v-slot">&lt;router-view&gt; 的 v-slot</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#createrouter">createRouter</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#参数">参数</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#createwebhistory">createWebHistory</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#参数-1">参数</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#示例">示例</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#createwebhashhistory">createWebHashHistory</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#参数-2">参数</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#示例-1">示例</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#creatememoryhistory">createMemoryHistory</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#参数-3">参数</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#returns">Returns</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#navigationfailuretype">NavigationFailureType</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#成员">成员</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#start-location">START_LOCATION</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#composition-api">Composition API</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#onbeforerouteleave">onBeforeRouteLeave</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#onbeforerouteupdate">onBeforeRouteUpdate</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#uselink">useLink</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#useroute">useRoute</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#userouter">useRouter</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#typescript">TypeScript</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#router-属性">Router 属性</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#currentroute">currentRoute</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#options">options</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#router-方法">Router 方法</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#addroute">addRoute</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#addroute-1">addRoute</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#aftereach">afterEach</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#back">back</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#beforeeach">beforeEach</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#beforeresolve">beforeResolve</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#forward">forward</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#getroutes">getRoutes</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#go">go</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#hasroute">hasRoute</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#isready">isReady</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#onerror">onError</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#push">push</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#removeroute">removeRoute</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#replace-1">replace</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#resolve">resolve</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#routeroptions">RouterOptions</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#history">history</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#linkactiveclass">linkActiveClass</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#linkexactactiveclass">linkExactActiveClass</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#parsequery">parseQuery</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#routes">routes</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#scrollbehavior">scrollBehavior</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#stringifyquery">stringifyQuery</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#routerecordraw">RouteRecordRaw</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#path">path</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#redirect">redirect</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#children">children</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#alias">alias</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#name-1">name</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#beforeenter">beforeEnter</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#props">props</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#meta">meta</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#routerecordnormalized">RouteRecordNormalized</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#aliasof">aliasOf</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#beforeenter-1">beforeEnter</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#children-1">children</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#components">components</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#meta-1">meta</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#name-2">name</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#path-1">path</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#props-1">props</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#redirect-1">redirect</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#routelocationraw">RouteLocationRaw</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#routelocation">RouteLocation</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#routelocationnormalized">RouteLocationNormalized</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#fullpath">fullPath</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#hash">hash</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#query">query</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#matched">matched</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#meta-2">meta</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#name-3">name</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#params">params</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#path-2">path</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#redirectedfrom">redirectedFrom</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#navigationfailure">NavigationFailure</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#from">from</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#to-1">to</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#type">type</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#navigationguard">NavigationGuard</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#component-injections">Component Injections</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#component-injected-属性">Component Injected 属性</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#component-enabled-options">Component Enabled Options</a><!----></li></ul></li><!--]--></ul><!--[--><!--[--><div class="sponsors" data-v-46b24580=""><span data-v-46b24580="">Sponsors</span><!--[--><a href="javascript:;" target="_blank" rel="noopener" data-v-46b24580=""><img src="https://posva-sponsors.pages.dev/logos/vuejobs.svg" alt="VueJobs" data-v-46b24580=""></a><!--]--></div><!--]--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-7eddb2c4=""><div class="container" data-v-7eddb2c4=""><!--[--><!--[--><div id="ads-container"><div class="carbon-ads" ref_key="el" data-v-5941b830=""></div></div><!--]--><!--[--><!--]--><!--]--><div style="position:relative;" class="content" data-v-7eddb2c4=""><div><h1 id="api-参考" tabindex="-1">API 参考 <a class="header-anchor" href="#api-参考" aria-hidden="true">#</a></h1><h2 id="router-link-props" tabindex="-1"><code>&lt;router-link&gt;</code> Props <a class="header-anchor" href="#router-link-props" aria-hidden="true">#</a></h2><h3 id="to" tabindex="-1">to <a class="header-anchor" href="#to" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<a href="#routelocationraw"><code>RouteLocationRaw</code></a></p></li><li><p><strong>详细内容</strong>：</p><p>表示目标路由的链接。当被点击后，内部会立刻把 <code>to</code> 的值传到 <code>router.push()</code>，所以这个值可以是一个 <code>string</code> 或者是<a href="#routelocationraw">描述目标位置的对象</a>。</p></li></ul><div class="language-html"><pre><code><span class="token comment">&lt;!-- 字符串 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 渲染结果 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 使用 v-bind 的 JS 表达式 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>/home<span class="token punctuation">&#39;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 同上 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ path: <span class="token punctuation">&#39;</span>/home<span class="token punctuation">&#39;</span> }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 命名的路由 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ name: <span class="token punctuation">&#39;</span>user<span class="token punctuation">&#39;</span>, params: { userId: <span class="token punctuation">&#39;</span>123<span class="token punctuation">&#39;</span> }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>User<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 带查询参数，下面的结果为 `/register?plan=private` --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ path: <span class="token punctuation">&#39;</span>/register<span class="token punctuation">&#39;</span>, query: { plan: <span class="token punctuation">&#39;</span>private<span class="token punctuation">&#39;</span> }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  Register
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="replace" tabindex="-1">replace <a class="header-anchor" href="#replace" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>boolean</code></p></li><li><p><strong>默认值</strong>：<code>false</code></p></li><li><p><strong>详细内容</strong>：</p><p>设置 <code>replace</code> 属性的话，当点击时，会调用 <code>router.replace()</code>，而不是 <code>router.push()</code>，所以导航后不会留下历史记录。</p></li></ul><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/abc<span class="token punctuation">&quot;</span></span> <span class="token attr-name">replace</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="active-class" tabindex="-1">active-class <a class="header-anchor" href="#active-class" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>string</code></p></li><li><p><strong>默认值</strong>：<code>&quot;router-link-active&quot;</code> (或者全局 <a href="#linkactiveclass"><code>linkActiveClass</code></a>)</p></li><li><p><strong>详细内容</strong>：</p><p>链接激活时，应用于渲染的 <code>&lt;a&gt;</code> 的 class。</p></li></ul><h3 id="aria-current-value" tabindex="-1">aria-current-value <a class="header-anchor" href="#aria-current-value" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>&#39;page&#39; | &#39;step&#39; | &#39;location&#39; | &#39;date&#39; | &#39;time&#39; | &#39;true&#39; | &#39;false&#39;</code> (<code>string</code>)</p></li><li><p><strong>默认值</strong>：<code>&quot;page&quot;</code></p></li><li><p><strong>详细内容</strong>：</p><p>当链接激活时，传递给属性 <code>aria-current</code> 的值。</p></li></ul><h3 id="custom" tabindex="-1">custom <a class="header-anchor" href="#custom" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>boolean</code></p></li><li><p><strong>默认值</strong>：<code>false</code></p></li><li><p><strong>详细内容</strong>：</p><p><code>&lt;router-link&gt;</code> 是否应该将其内容包裹在 <code>&lt;a&gt;</code> 元素中。在使用 <a href="#router-link-s-v-slot"><code>v-slot</code></a> 创建自定义 RouterLink 时很有用。默认情况下，<code>&lt;router-link&gt;</code> 会将其内容包裹在 <code>&lt;a&gt;</code> 元素中，即使使用 <code>v-slot</code> 也是如此。传递<code>自定义的</code> prop，可以去除这种行为。</p></li><li><p><strong>例如</strong>：</p><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home<span class="token punctuation">&quot;</span></span> <span class="token attr-name">custom</span> <span class="token attr-name">v-slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ navigate, href, route }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">:href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>href<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navigate<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ route.fullPath }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>渲染成 <code>&lt;a href=&quot;/home&quot;&gt;/home&lt;/a&gt;</code>。</p><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ route }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>{{ route.fullPath }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>渲染成 <code>&lt;a href=&quot;/home&quot;&gt;&lt;span&gt;/home&lt;/span&gt;&lt;/a&gt;</code>。</p></li></ul><h3 id="exact-active-class" tabindex="-1">exact-active-class <a class="header-anchor" href="#exact-active-class" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>string</code></p></li><li><p><strong>默认值</strong>：<code>&quot;router-link-exact-active&quot;</code> (或者全局 <a href="#linkexactactiveclass"><code>linkExactActiveClass</code></a>)</p></li><li><p><strong>详细内容</strong>：</p><p>链接精准激活时，应用于渲染的 <code>&lt;a&gt;</code> 的 class。</p></li></ul><h2 id="router-link-的-v-slot" tabindex="-1"><code>&lt;router-link&gt;</code> 的 <code>v-slot</code> <a class="header-anchor" href="#router-link-的-v-slot" aria-hidden="true">#</a></h2><p><code>&lt;router-link&gt;</code> 通过一个<a href="javascript:;" target="_blank" rel="noopener noreferrer">作用域插槽</a>暴露底层的定制能力。这是一个更高阶的 API，主要面向库作者，但也可以为开发者提供便利，大多数情况下用在一个类似 <em>NavLink</em> 这样的组件里。</p><div class="tip custom-block"><p class="custom-block-title">注意</p><p>记得把 <code>custom</code> 配置传递给 <code>&lt;router-link&gt;</code>，以防止它将内容包裹在 <code>&lt;a&gt;</code> 元素内。</p></div><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span>
  <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/about<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">custom</span>
  <span class="token attr-name">v-slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ href, route, navigate, isActive, isExactActive }<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>NavLink</span> <span class="token attr-name">:active</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isActive<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>href<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navigate<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    {{ route.fullPath }}
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>NavLink</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li><code>href</code>：解析后的 URL。将会作为一个 <code>&lt;a&gt;</code> 元素的 <code>href</code> 属性。如果什么都没提供，则它会包含 <code>base</code>。</li><li><code>route</code>：解析后的规范化的地址。</li><li><code>navigate</code>：触发导航的函数。 <strong>会在必要时自动阻止事件</strong>，和 <code>router-link</code> 一样。例如：<code>ctrl</code> 或者 <code>cmd</code> + 点击仍然会被 <code>navigate</code> 忽略。</li><li><code>isActive</code>：如果需要应用 <a href="#active-class">active class</a>，则为 <code>true</code>。允许应用一个任意的 class。</li><li><code>isExactActive</code>：如果需要应用 <a href="#exact-active-class">exact active class</a>，则为 <code>true</code>。允许应用一个任意的 class。</li></ul><h3 id="示例：将激活的-class-应用在外层元素" tabindex="-1">示例：将激活的 class 应用在外层元素 <a class="header-anchor" href="#示例：将激活的-class-应用在外层元素" aria-hidden="true">#</a></h3><p>有的时候我们可能想把激活的 class 应用到一个外部元素而不是 <code>&lt;a&gt;</code> 标签本身，这时你可以在一个 <code>router-link</code> 中包裹该元素并使用 <code>v-slot</code> 属性来创建链接：</p><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span>
  <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/foo<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">custom</span>
  <span class="token attr-name">v-slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ href, route, navigate, isActive, isExactActive }<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span>
    <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[isActive &amp;&amp; <span class="token punctuation">&#39;</span>router-link-active<span class="token punctuation">&#39;</span>, isExactActive &amp;&amp; <span class="token punctuation">&#39;</span>router-link-exact-active<span class="token punctuation">&#39;</span>]<span class="token punctuation">&quot;</span></span>
  <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">:href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>href<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navigate<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ route.fullPath }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="tip custom-block"><p class="custom-block-title">提示</p><p>如果你在 <code>a</code> 元素上添加一个 <code>target=&quot;_blank&quot;</code>，你必须省略 <code>@click=&quot;navigate&quot;</code> 的处理。</p></div><h2 id="router-view-props" tabindex="-1"><code>&lt;router-view&gt;</code> Props <a class="header-anchor" href="#router-view-props" aria-hidden="true">#</a></h2><h3 id="name" tabindex="-1">name <a class="header-anchor" href="#name" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>string</code></p></li><li><p><strong>默认值</strong>：<code>&quot;default&quot;</code></p></li><li><p><strong>详细内容</strong>：</p><p>如果 <code>&lt;router-view&gt;</code> 设置了 <code>name</code>，则会渲染对应的路由配置中 <code>components</code> 下的相应组件。</p></li><li><p><strong>更多的内容请看</strong>：<a href="named-views.html">命名视图</a></p></li></ul><h3 id="route" tabindex="-1">route <a class="header-anchor" href="#route" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<a href="#routelocationnormalized"><code>RouteLocationNormalized</code></a></p></li><li><p><strong>详细内容</strong>：</p><p>一个路由地址的所有组件都已被解析（如果所有组件都被懒加载），因此可以显示。</p></li></ul><h2 id="router-view-的-v-slot" tabindex="-1"><code>&lt;router-view&gt;</code> 的 <code>v-slot</code> <a class="header-anchor" href="#router-view-的-v-slot" aria-hidden="true">#</a></h2><p><code>&lt;router-view&gt;</code> 暴露了一个 <code>v-slot</code> API，主要使用 <code>&lt;transition&gt;</code> 和 <code>&lt;keep-alive&gt;</code> 组件来包裹你的路由组件。</p><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Suspense</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#default</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span> <span class="token attr-name">v-slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ Component, route }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>transition</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>route.meta.transition || <span class="token punctuation">&#39;</span>fade<span class="token punctuation">&#39;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>out-in<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>keep-alive</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span>
            <span class="token attr-name">:is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Component<span class="token punctuation">&quot;</span></span>
            <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>route.meta.usePathKey ? route.path : undefined<span class="token punctuation">&quot;</span></span>
          <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>keep-alive</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>transition</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#fallback</span><span class="token punctuation">&gt;</span></span> Loading... <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Suspense</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li><code>Component</code>: 要传递给 <code>&lt;component&gt;</code> 的 VNodes <code>是</code> prop。</li><li><code>route</code>: 解析出的标准化<a href="#routelocationnormalized">路由地址</a>。</li></ul><h2 id="createrouter" tabindex="-1">createRouter <a class="header-anchor" href="#createrouter" aria-hidden="true">#</a></h2><p>创建一个可以被 Vue 应用程序使用的路由实例。查看 <a href="#routeroptions"><code>RouterOptions</code></a> 中的所有可以传递的属性列表。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token keyword">export</span> <span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">createRouter</span><span class="token punctuation">(</span>options<span class="token operator">:</span> RouterOptions<span class="token punctuation">)</span><span class="token operator">:</span> Router
</code></pre></div><h3 id="参数" tabindex="-1">参数 <a class="header-anchor" href="#参数" aria-hidden="true">#</a></h3><table><thead><tr><th>参数</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td>options</td><td><a href="#routeroptions">RouterOptions</a></td><td>Options 用来初始化 router</td></tr></tbody></table><h2 id="createwebhistory" tabindex="-1">createWebHistory <a class="header-anchor" href="#createwebhistory" aria-hidden="true">#</a></h2><p>创建一个 HTML5 历史，即单页面应用程序中最常见的历史记录。应用程序必须通过 http 协议被提供服务。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token keyword">export</span> <span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">createWebHistory</span><span class="token punctuation">(</span>base<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> RouterHistory
</code></pre></div><h3 id="参数-1" tabindex="-1">参数 <a class="header-anchor" href="#参数-1" aria-hidden="true">#</a></h3><table><thead><tr><th>参数</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td>base</td><td><code>string</code></td><td>提供的可选 base。当应用程序被托管在诸如 <code>https://example.com/folder/</code> 之类的文件夹中时非常有用。</td></tr></tbody></table><h3 id="示例" tabindex="-1">示例 <a class="header-anchor" href="#示例" aria-hidden="true">#</a></h3><div class="language-js"><pre><code><span class="token function">createWebHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 没有 base，应用托管在域名 `https://example.com` 的根目录下。</span>
<span class="token function">createWebHistory</span><span class="token punctuation">(</span><span class="token string">&#39;/folder/&#39;</span><span class="token punctuation">)</span> <span class="token comment">// 给出的网址为 `https://example.com/folder/`</span>
</code></pre></div><h2 id="createwebhashhistory" tabindex="-1">createWebHashHistory <a class="header-anchor" href="#createwebhashhistory" aria-hidden="true">#</a></h2><p>创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 <code>file://</code>)，或当配置服务器不能处理任意 URL 时这非常有用。<strong>注意：如果 SEO 对你很重要，你应该使用 <a href="#createwebhistory"><code>createWebHistory</code></a></strong>。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token keyword">export</span> <span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">createWebHashHistory</span><span class="token punctuation">(</span>base<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> RouterHistory
</code></pre></div><h3 id="参数-2" tabindex="-1">参数 <a class="header-anchor" href="#参数-2" aria-hidden="true">#</a></h3><table><thead><tr><th>参数</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td>base</td><td><code>string</code></td><td>提供可选的 base。默认是 <code>location.pathname + location.search</code>。如果 <code>head</code> 中有一个 <code>&lt;base&gt;</code>，它的值将被忽略，而采用这个参数。<strong>但请注意它会影响所有的 history.pushState() 调用</strong>，这意味着如果你使用一个 <code>&lt;base&gt;</code> 标签，它的 <code>href</code> 值<strong>必须与这个参数相匹配</strong> (请忽略 <code>#</code> 后面的所有内容)</td></tr></tbody></table><h3 id="示例-1" tabindex="-1">示例 <a class="header-anchor" href="#示例-1" aria-hidden="true">#</a></h3><div class="language-js"><pre><code><span class="token comment">// at https://example.com/folder</span>
<span class="token function">createWebHashHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 给出的网址为 `https://example.com/folder#`</span>
<span class="token function">createWebHashHistory</span><span class="token punctuation">(</span><span class="token string">&#39;/folder/&#39;</span><span class="token punctuation">)</span> <span class="token comment">// 给出的网址为 `https://example.com/folder/#`</span>
<span class="token comment">// 如果在 base 中提供了 `#`，则它不会被 `createWebHashHistory` 添加</span>
<span class="token function">createWebHashHistory</span><span class="token punctuation">(</span><span class="token string">&#39;/folder/#/app/&#39;</span><span class="token punctuation">)</span> <span class="token comment">// 给出的网址为 `https://example.com/folder/#/app/`</span>
<span class="token comment">// 你应该避免这样做，因为它会更改原始 url 并打断正在复制的 url</span>
<span class="token function">createWebHashHistory</span><span class="token punctuation">(</span><span class="token string">&#39;/other-folder/&#39;</span><span class="token punctuation">)</span> <span class="token comment">// 给出的网址为 `https://example.com/other-folder/#`</span>

<span class="token comment">// at file:///usr/etc/folder/index.html</span>
<span class="token comment">// 对于没有 `host` 的位置，base被忽略</span>
<span class="token function">createWebHashHistory</span><span class="token punctuation">(</span><span class="token string">&#39;/iAmIgnored&#39;</span><span class="token punctuation">)</span> <span class="token comment">// 给出的网址为 `file:///usr/etc/folder/index.html#`</span>
</code></pre></div><h2 id="creatememoryhistory" tabindex="-1">createMemoryHistory <a class="header-anchor" href="#creatememoryhistory" aria-hidden="true">#</a></h2><p>创建一个基于内存的历史记录。这个历史记录的主要目的是处理 SSR。它在一个特殊的位置开始，这个位置无处不在。如果用户不在浏览器上下文中，它们可以通过调用 <code>router.push()</code> 或 <code>router.replace()</code> 将该位置替换为启动位置。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token keyword">export</span> <span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">createMemoryHistory</span><span class="token punctuation">(</span>base<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> RouterHistory
</code></pre></div><h3 id="参数-3" tabindex="-1">参数 <a class="header-anchor" href="#参数-3" aria-hidden="true">#</a></h3><table><thead><tr><th>参数</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td>base</td><td><code>string</code></td><td>Base 适用于所有 URL，默认为&#39;/&#39;</td></tr></tbody></table><h3 id="returns" tabindex="-1">Returns <a class="header-anchor" href="#returns" aria-hidden="true">#</a></h3><p>一个可以传递给路由构造函数的历史对象。</p><h2 id="navigationfailuretype" tabindex="-1">NavigationFailureType <a class="header-anchor" href="#navigationfailuretype" aria-hidden="true">#</a></h2><p>包含所有可能导航失败类型的枚举，可以传递给 <a href="#isnavigationfailure">isNavigationFailure</a> 来检查某些特定类型的失败。<strong>不要使用任何数值</strong>，总是使用诸如 <code>NavigationFailureType.aborted</code> 这样的变量。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token keyword">export</span> <span class="token keyword">declare</span> <span class="token keyword">enum</span> NavigationFailureType
</code></pre></div><h3 id="成员" tabindex="-1">成员 <a class="header-anchor" href="#成员" aria-hidden="true">#</a></h3><table><thead><tr><th>成员</th><th>值</th><th>描述</th></tr></thead><tbody><tr><td>aborted</td><td>4</td><td>终止导航是指由于导航守卫返回 <code>false</code> 或调用 <code>next(false)</code> 而失败的导航。</td></tr><tr><td>cancelled</td><td>8</td><td>取消导航是指由于最近的导航完成启动（不一定是完成）而失败的导航。</td></tr><tr><td>duplicated</td><td>16</td><td>重复导航是指在启动时已经在同一位置失败的导航。</td></tr></tbody></table><h2 id="start-location" tabindex="-1">START_LOCATION <a class="header-anchor" href="#start-location" aria-hidden="true">#</a></h2><ul><li><p><strong>类型</strong>：<a href="#routelocationnormalized"><code>RouteLocationNormalized</code></a></p></li><li><p><strong>详细内容</strong>：</p><p>路由所在的初始路由地址。可用于导航守卫中，以区分初始导航。</p><div class="language-js"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">START_LOCATION</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue-router&#39;</span>

router<span class="token punctuation">.</span><span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword">from</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>from <span class="token operator">===</span> <span class="token constant">START_LOCATION</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 初始导航</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div></li></ul><h2 id="composition-api" tabindex="-1">Composition API <a class="header-anchor" href="#composition-api" aria-hidden="true">#</a></h2><h3 id="onbeforerouteleave" tabindex="-1">onBeforeRouteLeave <a class="header-anchor" href="#onbeforerouteleave" aria-hidden="true">#</a></h3><p>添加一个导航守卫，在当前位置的组件将要离开时触发。类似于 <code>beforeRouteLeave</code>，但它可以在任何组件中使用。当组件被卸载时，导航守卫将被移除。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token keyword">export</span> <span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">onBeforeRouteLeave</span><span class="token punctuation">(</span>leaveGuard<span class="token operator">:</span> NavigationGuard<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
</code></pre></div><h4 id="参数-4" tabindex="-1">参数 <a class="header-anchor" href="#参数-4" aria-hidden="true">#</a></h4><table><thead><tr><th>参数</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td>leaveGuard</td><td><a href="#navigationguard"><code>NavigationGuard</code></a></td><td>要添加的导航守卫</td></tr></tbody></table><h3 id="onbeforerouteupdate" tabindex="-1">onBeforeRouteUpdate <a class="header-anchor" href="#onbeforerouteupdate" aria-hidden="true">#</a></h3><p>添加一个导航守卫，在当前位置即将更新时触发。类似于 <code>beforeRouteUpdate</code>，但它可以在任何组件中使用。当组件被卸载时，导航守卫将被移除。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token keyword">export</span> <span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">onBeforeRouteUpdate</span><span class="token punctuation">(</span>updateGuard<span class="token operator">:</span> NavigationGuard<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
</code></pre></div><h4 id="参数-5" tabindex="-1">参数 <a class="header-anchor" href="#参数-5" aria-hidden="true">#</a></h4><table><thead><tr><th>参数</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td>updateGuard</td><td><a href="#navigationguard"><code>NavigationGuard</code></a></td><td>要添加的导航守卫</td></tr></tbody></table><h3 id="uselink" tabindex="-1">useLink <a class="header-anchor" href="#uselink" aria-hidden="true">#</a></h3><p>返回 <a href="#router-link-s-v-slot"><code>v-slot</code> API</a> 暴露的所有内容。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token keyword">export</span> <span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">useLink</span><span class="token punctuation">(</span>props<span class="token operator">:</span> RouterLinkOptions<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  route<span class="token operator">:</span> ComputedRef<span class="token operator">&lt;</span>RouteLocationNormalized <span class="token operator">&amp;</span> <span class="token punctuation">{</span> href<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>
  href<span class="token operator">:</span> ComputedRef<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>
  isActive<span class="token operator">:</span> ComputedRef<span class="token operator">&lt;</span><span class="token builtin">boolean</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>
  isExactActive<span class="token operator">:</span> ComputedRef<span class="token operator">&lt;</span><span class="token builtin">boolean</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>
  <span class="token function-variable function">navigate</span><span class="token operator">:</span> <span class="token punctuation">(</span>event<span class="token operator">?</span><span class="token operator">:</span> MouseEvent<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">Promise</span><span class="token punctuation">(</span>NavigationFailure <span class="token operator">|</span> <span class="token keyword">void</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="参数-6" tabindex="-1">参数 <a class="header-anchor" href="#参数-6" aria-hidden="true">#</a></h4><table><thead><tr><th>参数</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td>props</td><td><code>RouterLinkOptions</code></td><td>props 对象可以传递给<code>&lt;router-link&gt;</code>。接收 <code>Ref</code> 和 <code>ComputedRef</code></td></tr></tbody></table><h3 id="useroute" tabindex="-1">useRoute <a class="header-anchor" href="#useroute" aria-hidden="true">#</a></h3><p>返回当前路由地址。相当于在模板中使用 <code>$route</code>。必须在 <code>setup()</code> 中调用。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token keyword">export</span> <span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">useRoute</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> RouteLocationNormalized
</code></pre></div><h3 id="userouter" tabindex="-1">useRouter <a class="header-anchor" href="#userouter" aria-hidden="true">#</a></h3><p>返回 <a href="#router-properties">router</a> 实例。相当于在模板中使用 <code>$router</code>。必须在 <code>setup()</code> 中调用。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token keyword">export</span> <span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">useRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> Router
</code></pre></div><h2 id="typescript" tabindex="-1">TypeScript <a class="header-anchor" href="#typescript" aria-hidden="true">#</a></h2><p>下面是 Vue Router 使用的一些接口和类型。文档引用它们是为了让你了解对象中现有的属性。</p><h2 id="router-属性" tabindex="-1">Router 属性 <a class="header-anchor" href="#router-属性" aria-hidden="true">#</a></h2><h3 id="currentroute" tabindex="-1">currentRoute <a class="header-anchor" href="#currentroute" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<a href="#routelocationnormalized"><code>Ref&lt;RouteLocationNormalized&gt;</code></a></p></li><li><p><strong>详细内容</strong>：</p><p>当前路由地址。只读的。</p></li></ul><h3 id="options" tabindex="-1">options <a class="header-anchor" href="#options" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<a href="#routeroptions"><code>RouterOptions</code></a></p></li><li><p><strong>详细内容</strong>：</p><p>创建 Router 时传递的原始配置对象。只读的。</p></li></ul><h2 id="router-方法" tabindex="-1">Router 方法 <a class="header-anchor" href="#router-方法" aria-hidden="true">#</a></h2><h3 id="addroute" tabindex="-1">addRoute <a class="header-anchor" href="#addroute" aria-hidden="true">#</a></h3><p>添加一条新的<a href="#routerecordraw">路由记录</a>作为现有路由的子路由。如果路由有一个 <code>name</code>，并且已经有一个与之名字相同的路由，它会先删除之前的路由。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token function">addRoute</span><span class="token punctuation">(</span>parentName<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">symbol</span><span class="token punctuation">,</span> route<span class="token operator">:</span> RouteRecordRaw<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
</code></pre></div><p><em>参数</em></p><table><thead><tr><th>参数</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td>parentName</td><td><code>string | symbol</code></td><td>父路由记录，<code>route</code> 应该被添加到的位置</td></tr><tr><td>route</td><td><a href="#routerecordraw"><code>RouteRecordRaw</code></a></td><td>要添加的路由记录</td></tr></tbody></table><h3 id="addroute-1" tabindex="-1">addRoute <a class="header-anchor" href="#addroute-1" aria-hidden="true">#</a></h3><p>添加一条新的<a href="#routerecordraw">路由记录</a>到路由。如果路由有一个 <code>name</code>，并且已经有一个与之名字相同的路由，它会先删除之前的路由。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token function">addRoute</span><span class="token punctuation">(</span>route<span class="token operator">:</span> RouteRecordRaw<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
</code></pre></div><p><em>参数</em></p><table><thead><tr><th>参数</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td>route</td><td><a href="#routerecordraw"><code>RouteRecordRaw</code></a></td><td>要添加的路由记录</td></tr></tbody></table><div class="tip custom-block"><p class="custom-block-title">提示</p><p>请注意，添加路由并不会触发新的导航。也就是说，除非触发新的导航，否则不会显示所添加的路由。</p></div><h3 id="aftereach" tabindex="-1">afterEach <a class="header-anchor" href="#aftereach" aria-hidden="true">#</a></h3><p>添加一个导航钩子，在每次导航后执行。返回一个删除注册钩子的函数。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token function">afterEach</span><span class="token punctuation">(</span>guard<span class="token operator">:</span> NavigationHookAfter<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
</code></pre></div><p><em>参数</em></p><table><thead><tr><th>参数</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td>guard</td><td><code>NavigationHookAfter</code></td><td>要添加的导航钩子</td></tr></tbody></table><h4 id="示例-2" tabindex="-1">示例 <a class="header-anchor" href="#示例-2" aria-hidden="true">#</a></h4><div class="language-js"><pre><code>router<span class="token punctuation">.</span><span class="token function">afterEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> failure</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isNavigationFailure</span><span class="token punctuation">(</span>failure<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;failed navigation&#39;</span><span class="token punctuation">,</span> failure<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="back" tabindex="-1">back <a class="header-anchor" href="#back" aria-hidden="true">#</a></h3><p>如果可能的话，通过调用 <code>history.back()</code> 回溯历史。相当于 <code>router.go(-1)</code>。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
</code></pre></div><h3 id="beforeeach" tabindex="-1">beforeEach <a class="header-anchor" href="#beforeeach" aria-hidden="true">#</a></h3><p>添加一个导航守卫，在任何导航前执行。返回一个删除已注册守卫的函数。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token function">beforeEach</span><span class="token punctuation">(</span>guard<span class="token operator">:</span> NavigationGuard<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
</code></pre></div><p><em>参数</em></p><table><thead><tr><th>参数</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td>guard</td><td><a href="#navigationguard"><code>NavigationGuard</code></a></td><td>要添加的导航守卫</td></tr></tbody></table><h3 id="beforeresolve" tabindex="-1">beforeResolve <a class="header-anchor" href="#beforeresolve" aria-hidden="true">#</a></h3><p>添加一个导航守卫，在导航即将解析之前执行。在这个状态下，所有的组件都已经被获取，并且其他导航守卫也已经成功。返回一个删除已注册守卫的函数。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token function">beforeResolve</span><span class="token punctuation">(</span>guard<span class="token operator">:</span> NavigationGuard<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
</code></pre></div><p><em>参数</em></p><table><thead><tr><th>参数</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td>guard</td><td><a href="#navigationguard"><code>NavigationGuard</code></a></td><td>要添加的导航守卫</td></tr></tbody></table><h4 id="示例-3" tabindex="-1">示例 <a class="header-anchor" href="#示例-3" aria-hidden="true">#</a></h4><div class="language-js"><pre><code>router<span class="token punctuation">.</span><span class="token function">beforeResolve</span><span class="token punctuation">(</span><span class="token parameter">to</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>to<span class="token punctuation">.</span>meta<span class="token punctuation">.</span>requiresAuth <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span>isAuthenticated<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="forward" tabindex="-1">forward <a class="header-anchor" href="#forward" aria-hidden="true">#</a></h3><p>如果可能的话，通过调用 <code>history.forward()</code> 在历史中前进。相当于 <code>router.go(1)</code>。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token function">forward</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
</code></pre></div><h3 id="getroutes" tabindex="-1">getRoutes <a class="header-anchor" href="#getroutes" aria-hidden="true">#</a></h3><p>获取所有 <a href="#routerecord">路由记录</a>的完整列表。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token function">getRoutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> RouteRecord<span class="token punctuation">[</span><span class="token punctuation">]</span>
</code></pre></div><h3 id="go" tabindex="-1">go <a class="header-anchor" href="#go" aria-hidden="true">#</a></h3><p>允许你在历史中前进或后退。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token function">go</span><span class="token punctuation">(</span>delta<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
</code></pre></div><p><em>参数</em></p><table><thead><tr><th>参数</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td>delta</td><td><code>number</code></td><td>相对于当前页面，你要移动到的历史位置</td></tr></tbody></table><h3 id="hasroute" tabindex="-1">hasRoute <a class="header-anchor" href="#hasroute" aria-hidden="true">#</a></h3><p>确认是否存在指定名称的路由。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token function">hasRoute</span><span class="token punctuation">(</span>name<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">symbol</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
</code></pre></div><p><em>参数</em></p><table><thead><tr><th>参数</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td>name</td><td><code>string | symbol</code></td><td>要确认的路由名称</td></tr></tbody></table><h3 id="isready" tabindex="-1">isReady <a class="header-anchor" href="#isready" aria-hidden="true">#</a></h3><p>当路由器完成初始化导航时，返回一个 Promise，这意味着它已经解析了所有与初始路由相关的异步输入钩子和异步组件。如果初始导航已经发生了，那么 promise 就会立即解析。这在服务器端渲染中很有用，可以确保服务器和客户端的输出一致。需要注意的是，在服务器端，你需要手动推送初始位置，而在客户端，路由器会自动从 URL 中获取初始位置。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token function">isReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token keyword">void</span><span class="token operator">&gt;</span>
</code></pre></div><h3 id="onerror" tabindex="-1">onError <a class="header-anchor" href="#onerror" aria-hidden="true">#</a></h3><p>添加一个错误处理程序，在导航期间每次发生未捕获的错误时都会调用该处理程序。这包括同步和异步抛出的错误、在任何导航守卫中返回或传递给 <code>next</code> 的错误，以及在试图解析渲染路由所需的异步组件时发生的错误。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token function">onError</span><span class="token punctuation">(</span><span class="token function-variable function">handler</span><span class="token operator">:</span> <span class="token punctuation">(</span>error<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> to<span class="token operator">:</span> RouteLocationNormalized<span class="token punctuation">,</span> from<span class="token operator">:</span> RouteLocationNormalized<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">any</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
</code></pre></div><p><em>参数</em></p><table><thead><tr><th>参数</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td>handler</td><td><code>(error: any, to: RouteLocationNormalized, from: RouteLocationNormalized) =&gt; any</code></td><td>error handler to register</td></tr></tbody></table><h3 id="push" tabindex="-1">push <a class="header-anchor" href="#push" aria-hidden="true">#</a></h3><p>通过在历史堆栈中推送一个 entry，以编程方式导航到一个新的 URL。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token function">push</span><span class="token punctuation">(</span>to<span class="token operator">:</span> RouteLocationRaw<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span>NavigationFailure <span class="token operator">|</span> <span class="token keyword">void</span> <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token operator">&gt;</span>
</code></pre></div><p><em>参数</em></p><table><thead><tr><th>参数</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td>to</td><td><a href="#routelocationraw"><code>RouteLocationRaw</code></a></td><td>要导航到的路由地址</td></tr></tbody></table><h3 id="removeroute" tabindex="-1">removeRoute <a class="header-anchor" href="#removeroute" aria-hidden="true">#</a></h3><p>通过名称删除现有路由。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token function">removeRoute</span><span class="token punctuation">(</span>name<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">symbol</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
</code></pre></div><p><em>参数</em></p><table><thead><tr><th>参数</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td>name</td><td><code>string | symbol</code></td><td>要删除的路由名称</td></tr></tbody></table><h3 id="replace-1" tabindex="-1">replace <a class="header-anchor" href="#replace-1" aria-hidden="true">#</a></h3><p>通过替换历史堆栈中的当前 entry，以编程方式导航到一个新的 URL。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token function">replace</span><span class="token punctuation">(</span>to<span class="token operator">:</span> RouteLocationRaw<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span>NavigationFailure <span class="token operator">|</span> <span class="token keyword">void</span> <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token operator">&gt;</span>
</code></pre></div><p><em>参数</em></p><table><thead><tr><th>参数</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td>to</td><td><a href="#routelocationraw"><code>RouteLocationRaw</code></a></td><td>要导航到的路由地址</td></tr></tbody></table><h3 id="resolve" tabindex="-1">resolve <a class="header-anchor" href="#resolve" aria-hidden="true">#</a></h3><p>返回<a href="#routelocationraw">路由地址</a>的<a href="#routelocation">标准化版本</a>。还包括一个包含任何现有 <code>base</code> 的 <code>href</code> 属性。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code><span class="token function">resolve</span><span class="token punctuation">(</span>to<span class="token operator">:</span> RouteLocationRaw<span class="token punctuation">)</span><span class="token operator">:</span> RouteLocation <span class="token operator">&amp;</span> <span class="token punctuation">{</span>
  href<span class="token operator">:</span> <span class="token builtin">string</span>
<span class="token punctuation">}</span>
</code></pre></div><p><em>参数</em></p><table><thead><tr><th>参数</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td>to</td><td><a href="#routelocationraw"><code>RouteLocationRaw</code></a></td><td>要解析的原始路由地址</td></tr></tbody></table><h2 id="routeroptions" tabindex="-1">RouterOptions <a class="header-anchor" href="#routeroptions" aria-hidden="true">#</a></h2><h3 id="history" tabindex="-1">history <a class="header-anchor" href="#history" aria-hidden="true">#</a></h3><p>用于路由实现历史记录。大多数 web 应用程序都应该使用 <code>createWebHistory</code>，但它要求正确配置服务器。你还可以使用 <code>createWebHashHistory</code> 的基于 <em>hash</em> 的历史记录，它不需要在服务器上进行任何配置，但是搜索引擎根本不会处理它，在 SEO 上表现很差。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code>history<span class="token operator">:</span> RouterHistory
</code></pre></div><h4 id="示例-4" tabindex="-1">示例 <a class="header-anchor" href="#示例-4" aria-hidden="true">#</a></h4><div class="language-js"><pre><code><span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">history</span><span class="token operator">:</span> <span class="token function">createWebHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token comment">// 其他配置...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="linkactiveclass" tabindex="-1">linkActiveClass <a class="header-anchor" href="#linkactiveclass" aria-hidden="true">#</a></h3><p>用于激活的 <a href="#router-link-props">RouterLink</a> 的默认类。如果什么都没提供，则会使用 <code>router-link-active</code>。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code>linkActiveClass<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
</code></pre></div><h3 id="linkexactactiveclass" tabindex="-1">linkExactActiveClass <a class="header-anchor" href="#linkexactactiveclass" aria-hidden="true">#</a></h3><p>用于精准激活的 <a href="#router-link-props">RouterLink</a> 的默认类。如果什么都没提供，则会使用 <code>router-link-exact-active</code>。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code>linkExactActiveClass<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
</code></pre></div><h3 id="parsequery" tabindex="-1">parseQuery <a class="header-anchor" href="#parsequery" aria-hidden="true">#</a></h3><p>用于解析查询的自定义实现。必须解码查询键和值。参见对应的 <a href="#stringifyquery">stringifyQuery</a>。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code>parseQuery<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span>searchQuery<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token builtin">string</span> <span class="token operator">|</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">|</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token keyword">null</span><span class="token operator">&gt;</span>
</code></pre></div><h4 id="示例-5" tabindex="-1">示例 <a class="header-anchor" href="#示例-5" aria-hidden="true">#</a></h4><p>比方说，你想使用 <a href="javascript:;" target="_blank" rel="noopener noreferrer">qs</a> 包来解析查询，你可以同时提供 <code>parseQuery</code> 和 <code>stringifyQuery</code>：</p><div class="language-js"><pre><code><span class="token keyword">import</span> qs <span class="token keyword">from</span> <span class="token string">&#39;qs&#39;</span>

<span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// 其他配置...</span>
  <span class="token literal-property property">parseQuery</span><span class="token operator">:</span> qs<span class="token punctuation">.</span>parse<span class="token punctuation">,</span>
  <span class="token literal-property property">stringifyQuery</span><span class="token operator">:</span> qs<span class="token punctuation">.</span>stringify<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="routes" tabindex="-1">routes <a class="header-anchor" href="#routes" aria-hidden="true">#</a></h3><p>应该添加到路由的初始路由列表。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code>routes<span class="token operator">:</span> RouteRecordRaw<span class="token punctuation">[</span><span class="token punctuation">]</span>
</code></pre></div><h3 id="scrollbehavior" tabindex="-1">scrollBehavior <a class="header-anchor" href="#scrollbehavior" aria-hidden="true">#</a></h3><p>在页面之间导航时控制滚动的函数。可以返回一个 Promise 来延迟滚动。有关更多详细信息，请参见<a href="scroll-behavior.html">滚动行为</a>。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code>scrollBehavior<span class="token operator">?</span><span class="token operator">:</span> RouterScrollBehavior
</code></pre></div><h4 id="示例-6" tabindex="-1">示例 <a class="header-anchor" href="#示例-6" aria-hidden="true">#</a></h4><div class="language-js"><pre><code><span class="token keyword">function</span> <span class="token function">scrollBehavior</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> savedPosition</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// `to` 和 `from` 都是路由地址</span>
  <span class="token comment">// `savedPosition` 可以为空，如果没有的话。</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="stringifyquery" tabindex="-1">stringifyQuery <a class="header-anchor" href="#stringifyquery" aria-hidden="true">#</a></h3><p>对查询对象进行字符串化的自定义实现。不应该在前面加上 <code>?</code>。应该正确编码查询键和值。 <a href="#parsequery">parseQuery</a> 对应于处理查询解析。</p><p><strong>函数签名：</strong></p><div class="language-typescript"><pre><code>stringifyQuery<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span>
  query<span class="token operator">:</span> Record<span class="token operator">&lt;</span>
    <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">,</span>
    <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token keyword">null</span> <span class="token operator">|</span> <span class="token keyword">undefined</span> <span class="token operator">|</span> <span class="token punctuation">(</span><span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token keyword">null</span> <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  <span class="token operator">&gt;</span>
<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">string</span>
</code></pre></div><h2 id="routerecordraw" tabindex="-1">RouteRecordRaw <a class="header-anchor" href="#routerecordraw" aria-hidden="true">#</a></h2><p>当用户通过 <a href="#routeroptions"><code>routes</code> option</a> 或者 <a href="#addroute"><code>router.addRoute()</code></a> 来添加路由时，可以得到路由记录。 有三种不同的路由记录:</p><ul><li>单一视图记录：有一个 <code>component</code> 配置</li><li>多视图记录 (<a href="named-views.html">命名视图</a>) ：有一个 <code>components</code> 配置</li><li>重定向记录：没有 <code>component</code> 或 <code>components</code> 配置，因为重定向记录永远不会到达。</li></ul><h3 id="path" tabindex="-1">path <a class="header-anchor" href="#path" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>string</code></p></li><li><p><strong>详细内容</strong>：</p><p>记录的路径。应该以 <code>/</code> 开头，除非该记录是另一条记录的子记录。可以定义参数：<code>/users/:id</code> 匹配 <code>/users/1</code> 以及 <code>/users/posva</code>。</p></li><li><p><strong>更多的内容请看</strong>：<a href="dynamic-matching.html">动态路由匹配</a></p></li></ul><h3 id="redirect" tabindex="-1">redirect <a class="header-anchor" href="#redirect" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>RouteLocationRaw | (to: RouteLocationNormalized) =&gt; RouteLocationRaw</code> (可选)</p></li><li><p><strong>详细内容</strong>：</p><p>如果路由是直接匹配的，那么重定向到哪里呢。重定向发生在所有导航守卫之前，并以新的目标位置触发一个新的导航。也可以是一个接收目标路由地址并返回我们应该重定向到的位置的函数。</p></li></ul><h3 id="children" tabindex="-1">children <a class="header-anchor" href="#children" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<a href="#routerecordraw"><code>RouteRecordRaw</code></a> 数组 (可选)</p></li><li><p><strong>详细内容</strong>：</p><p>当前记录的嵌套路由。</p></li><li><p><strong>更多的内容请看</strong>：<a href="nested-routes.html">Nested Routes</a></p></li></ul><h3 id="alias" tabindex="-1">alias <a class="header-anchor" href="#alias" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>string | string[]</code> (可选)</p></li><li><p><strong>详细内容</strong>：</p><p>路由的别名。允许定义类似记录副本的额外路由。这使得路由可以简写为像这种 <code>/users/:id</code> 和 <code>/u/:id</code>。 <strong>所有的 <code>alias</code> 和 <code>path</code> 值必须共享相同的参数</strong>。</p></li></ul><h3 id="name-1" tabindex="-1">name <a class="header-anchor" href="#name-1" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>string | symbol</code> (可选)</p></li><li><p><strong>详细内容</strong>：</p><p>路由记录独一无二的名称。</p></li></ul><h3 id="beforeenter" tabindex="-1">beforeEnter <a class="header-anchor" href="#beforeenter" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<a href="#navigationguard"><code>NavigationGuard | NavigationGuard[]</code></a> (可选)</p></li><li><p><strong>详细内容</strong>：</p><p>在进入特定于此记录的守卫之前。注意如果记录有<code>重定向</code>属性，则 <code>beforeEnter</code> 无效。</p></li></ul><h3 id="props" tabindex="-1">props <a class="header-anchor" href="#props" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>boolean | Record&lt;string, any&gt; | (to: RouteLocationNormalized) =&gt; Record&lt;string, any&gt;</code> (可选)</p></li><li><p><strong>详细内容</strong>：</p><p>允许将参数作为 props 传递给由 <code>router-view</code> 渲染的组件。当传递给一个<em>多视图记录</em>时，它应该是一个与<code>组件</code>具有相同键的对象，或者是一个应用于每个组件的<code>布尔值</code>。</p></li><li><p><strong>更多的内容请看</strong>：<a href="passing-props.html">给路由组件传 props</a></p></li></ul><h3 id="meta" tabindex="-1">meta <a class="header-anchor" href="#meta" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<a href="#routemeta"><code>RouteMeta</code></a> (可选)</p></li><li><p><strong>详细内容</strong>：</p><p>在记录上附加自定义数据。</p></li><li><p><strong>更多的内容请看</strong>：<a href="meta.html">Meta 字段</a></p></li></ul><div class="tip custom-block"><p class="custom-block-title">注意</p><p>如果你想使用函数式组件, 请确保在组件上添加一个 <code>displayName</code>。</p><p>例如:</p><div class="language-js"><pre><code><span class="token keyword">const</span> <span class="token function-variable function">HomeView</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">h</span><span class="token punctuation">(</span><span class="token string">&#39;div&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;HomePage&#39;</span><span class="token punctuation">)</span>
<span class="token comment">// 使用TypeScript时, 组件需要为 FunctionalComponent 类型</span>
HomeView<span class="token punctuation">.</span>displayName <span class="token operator">=</span> <span class="token string">&#39;HomeView&#39;</span>
<span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> HomeView <span class="token punctuation">}</span><span class="token punctuation">]</span>
</code></pre></div></div><h2 id="routerecordnormalized" tabindex="-1">RouteRecordNormalized <a class="header-anchor" href="#routerecordnormalized" aria-hidden="true">#</a></h2><p><a href="#routerecordraw">路由记录</a>的标准化版本</p><h3 id="aliasof" tabindex="-1">aliasOf <a class="header-anchor" href="#aliasof" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>RouteRecordNormalized | undefined</code></p></li><li><p><strong>详细内容</strong>：</p><p>定义此记录是否是另一个记录的别名。如果该记录是原始记录，则此属性为 <code>undefined</code>。</p></li></ul><h3 id="beforeenter-1" tabindex="-1">beforeEnter <a class="header-anchor" href="#beforeenter-1" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<a href="#navigationguard"><code>NavigationGuard</code></a></p></li><li><p><strong>详细内容</strong>：</p><p>当从其他地方进入此记录时，导航守卫会被应用。</p></li><li><p><strong>更多的内容请看</strong>：<a href="navigation-guards.html">导航守卫</a></p></li></ul><h3 id="children-1" tabindex="-1">children <a class="header-anchor" href="#children-1" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：标准化<a href="#routerecordnormalized">路由记录</a>数组</p></li><li><p><strong>详细内容</strong>：</p><p>当前路由的子路由记录。如果没有则为空数组。</p></li></ul><h3 id="components" tabindex="-1">components <a class="header-anchor" href="#components" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>Record&lt;string, Component&gt;</code></p></li><li><p><strong>详细内容</strong>：</p><p>命名视图的字典，如果没有，包含一个键为 <code>default</code> 的对象。</p></li></ul><h3 id="meta-1" tabindex="-1">meta <a class="header-anchor" href="#meta-1" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>RouteMeta</code></p></li><li><p><strong>详细内容</strong>：</p><p>附在记录上的任意数据。</p></li><li><p><strong>更多的内容请看</strong>：<a href="meta.html">Meta 字段</a></p></li></ul><h3 id="name-2" tabindex="-1">name <a class="header-anchor" href="#name-2" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>string | symbol | undefined</code></p></li><li><p><strong>详细内容</strong>：</p><p>路由记录的名称。如果什么都没提供，则为 <code>undefined</code>。</p></li></ul><h3 id="path-1" tabindex="-1">path <a class="header-anchor" href="#path-1" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>string</code></p></li><li><p><strong>详细内容</strong>：</p><p>路由记录的标准化路径。包括所有父级的 <code>path</code>。</p></li></ul><h3 id="props-1" tabindex="-1">props <a class="header-anchor" href="#props-1" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>Record&lt;string, boolean | Function | Record&lt;string, any&gt;&gt;</code></p></li><li><p><strong>详细内容</strong>：</p><p>每个命名视图的 <a href="#props"><code>props</code> 配置</a>字典。如果没有，它将只包含一个名为 <code>default</code> 的属性。</p></li></ul><h3 id="redirect-1" tabindex="-1">redirect <a class="header-anchor" href="#redirect-1" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<a href="#routelocationraw"><code>RouteLocationRaw</code></a></p></li><li><p><strong>详细内容</strong>：</p><p>如果路由是直接匹配的，那么重定向到哪里呢。重定向发生在所有导航守卫之前，并触发一个带有新目标位置的新导航。</p></li></ul><h2 id="routelocationraw" tabindex="-1">RouteLocationRaw <a class="header-anchor" href="#routelocationraw" aria-hidden="true">#</a></h2><p>用户级的路由地址，可以传递给 <code>router.push()</code>，<code>redirect</code>，并在<a href="navigation-guards.html">导航守卫</a>中返回。</p><p>原始位置可以是一个 <code>字符串</code>，比如 <code>/users/posva#bio</code>，也可以是一个对象：</p><div class="language-js"><pre><code><span class="token comment">// 这三种形式是等价的</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">&#39;/users/posva#bio&#39;</span><span class="token punctuation">)</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/users/posva&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">hash</span><span class="token operator">:</span> <span class="token string">&#39;#bio&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;users&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">&#39;posva&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">hash</span><span class="token operator">:</span> <span class="token string">&#39;#bio&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 只改变 hash</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">hash</span><span class="token operator">:</span> <span class="token string">&#39;#bio&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 只改变 query</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">page</span><span class="token operator">:</span> <span class="token string">&#39;2&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 只改变 param</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">&#39;jolyne&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>注意 <code>path</code> 必须以编码方式提供(例如，<code>phantom blood</code> 变为 <code>phantom%20blood</code>)。而 <code>params</code>、<code>query</code> 和 <code>hash</code> 一定不要这样，因为它们会被路由编码。</p><p>原始路由地址还支持一个额外的配置 <code>replace</code> 来调用导航守卫中的 <code>router.replace()</code>，而不是 <code>router.push()</code>。请注意，即使在调用 <code>router.push()</code>时，它也会在内部调用 <code>router.replace()</code> ：</p><div class="language-js"><pre><code>router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">hash</span><span class="token operator">:</span> <span class="token string">&#39;#bio&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">replace</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 相当于</span>
router<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">hash</span><span class="token operator">:</span> <span class="token string">&#39;#bio&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="routelocation" tabindex="-1">RouteLocation <a class="header-anchor" href="#routelocation" aria-hidden="true">#</a></h2><p>可以包含<a href="#routerecordraw">重定向记录</a>的解析的 <a href="#routelocationraw">RouteLocationRaw</a>。除此之外，它还具有与 <a href="#routelocationnormalized">RouteLocationNormalized</a> 相同的属性。</p><h2 id="routelocationnormalized" tabindex="-1">RouteLocationNormalized <a class="header-anchor" href="#routelocationnormalized" aria-hidden="true">#</a></h2><p>标准化的路由地址。没有任何<a href="#routerecordraw">重定向记录</a>。在导航守卫中，<code>to</code> 和 <code>from</code> 总是属于这种类型。</p><h3 id="fullpath" tabindex="-1">fullPath <a class="header-anchor" href="#fullpath" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>string</code></p></li><li><p><strong>详细内容</strong>：</p><p>URL 编码与路由地址有关。包括 <code>path</code>、 <code>query</code> 和 <code>hash</code>。</p></li></ul><h3 id="hash" tabindex="-1">hash <a class="header-anchor" href="#hash" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>string</code></p></li><li><p><strong>详细内容</strong>：</p><p>已解码 URL 的 <code>hash</code> 部分。总是以 <code>#</code>开头。如果 URL 中没有 <code>hash</code>，则为空字符串。</p></li></ul><h3 id="query" tabindex="-1">query <a class="header-anchor" href="#query" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>Record&lt;string, string | string[]&gt;</code></p></li><li><p><strong>详细内容</strong>：</p><p>从 URL 的 <code>search</code> 部分提取的已解码查询参数的字典。</p></li></ul><h3 id="matched" tabindex="-1">matched <a class="header-anchor" href="#matched" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<a href="#routerecordnormalized"><code>RouteRecordNormalized[]</code></a></p></li><li><p><strong>详细内容</strong>：</p><p>与给定路由地址匹配的<a href="#routerecord">标准化的路由记录</a>数组。</p></li></ul><h3 id="meta-2" tabindex="-1">meta <a class="header-anchor" href="#meta-2" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>RouteMeta</code></p></li><li><p><strong>详细内容</strong>：</p><p>附加到从父级到子级合并（非递归）的所有匹配记录的任意数据。</p></li><li><p><strong>更多的内容请看</strong>：<a href="meta.html">Meta 字段</a></p></li></ul><h3 id="name-3" tabindex="-1">name <a class="header-anchor" href="#name-3" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>string | symbol | undefined | null</code></p></li><li><p><strong>详细内容</strong>：</p><p>路由记录的名称。如果什么都没提供，则为 <code>undefined</code>。</p></li></ul><h3 id="params" tabindex="-1">params <a class="header-anchor" href="#params" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>Record&lt;string, string | string[]&gt;</code></p></li><li><p><strong>详细内容</strong>：</p><p>从 <code>path</code> 中提取的已解码参数字典。</p></li></ul><h3 id="path-2" tabindex="-1">path <a class="header-anchor" href="#path-2" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<code>string</code></p></li><li><p><strong>详细内容</strong>：</p><p>编码 URL 的 <code>pathname</code> 部分，与路由地址有关。</p></li></ul><h3 id="redirectedfrom" tabindex="-1">redirectedFrom <a class="header-anchor" href="#redirectedfrom" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<a href="#routelocation"><code>RouteLocation</code></a></p></li><li><p><strong>详细内容</strong>：</p><p>在找到 <code>redirect</code> 配置或带有路由地址的名为 <code>next()</code> 的导航守卫时，我们最初尝试访问的路由地址，最后到达当前位置。如果没有重定向，则为 <code>undefined</code>。</p></li></ul><h2 id="navigationfailure" tabindex="-1">NavigationFailure <a class="header-anchor" href="#navigationfailure" aria-hidden="true">#</a></h2><h3 id="from" tabindex="-1">from <a class="header-anchor" href="#from" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<a href="#routelocationnormalized"><code>RouteLocationNormalized</code></a></p></li><li><p><strong>详细内容</strong>：</p><p>导航来的路由地址</p></li></ul><h3 id="to-1" tabindex="-1">to <a class="header-anchor" href="#to-1" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<a href="#routelocationnormalized"><code>RouteLocationNormalized</code></a></p></li><li><p><strong>详细内容</strong>：</p><p>导航去的路由地址</p></li></ul><h3 id="type" tabindex="-1">type <a class="header-anchor" href="#type" aria-hidden="true">#</a></h3><ul><li><p><strong>类型</strong>：<a href="#navigationfailuretype"><code>NavigationFailureType</code></a></p></li><li><p><strong>详细内容</strong>：</p><p>导航失败的类型</p></li><li><p><strong>更多的内容请看</strong>：<a href="navigation-failures.html">Navigation Failures</a></p></li></ul><h2 id="navigationguard" tabindex="-1">NavigationGuard <a class="header-anchor" href="#navigationguard" aria-hidden="true">#</a></h2><ul><li><p><strong>Arguments</strong>：</p><ul><li><a href="#routelocationnormalized"><code>RouteLocationNormalized</code></a> to - 我们要导航到的路由地址</li><li><a href="#routelocationnormalized"><code>RouteLocationNormalized</code></a> from - 我们从哪里来的路由地址</li><li><code>Function</code> next (可选) - 回调以验证导航</li></ul></li><li><p><strong>详细内容</strong>：</p><p>可以通过函数来控制路由导航。如果你返回一个值（或一个 Promise ），则可以省略 <code>next</code> 回调，并且我们鼓励这样做。可能的返回值 (和 <code>next</code>的参数) 有：</p><ul><li><code>undefined | void | true</code>: 验证导航</li><li><code>false</code>: 取消导航</li><li><a href="#routelocationraw"><code>RouteLocationRaw</code></a>: 重定向到一个不同的位置</li><li><code>(vm: ComponentPublicInstance) =&gt; any</code> <strong>仅适用于 <code>beforeRouteEnter</code></strong>：导航完成后执行的回调。接收路由组件实例作为参数。</li></ul></li><li><p><strong>更多的内容请看</strong>：<a href="navigation-guards.html">导航守卫</a></p></li></ul><h2 id="component-injections" tabindex="-1">Component Injections <a class="header-anchor" href="#component-injections" aria-hidden="true">#</a></h2><h3 id="component-injected-属性" tabindex="-1">Component Injected 属性 <a class="header-anchor" href="#component-injected-属性" aria-hidden="true">#</a></h3><p>这些属性通过调用 <code>app.use(router)</code> 注入到每个子组件中。</p><ul><li><p><strong>this.$router</strong></p><p>router 实例</p></li><li><p><strong>this.$route</strong></p><p>当前激活的<a href="#routelocationnormalized">路由地址</a>。这个属性是只读的，并且它的属性是不可改变的，但是它可以被观察。</p></li></ul><h3 id="component-enabled-options" tabindex="-1">Component Enabled Options <a class="header-anchor" href="#component-enabled-options" aria-hidden="true">#</a></h3><ul><li><strong>beforeRouteEnter</strong></li><li><strong>beforeRouteUpdate</strong></li><li><strong>beforeRouteLeave</strong></li></ul><p>请看<a href="navigation-guards.html#组件内的守卫">组件内的守卫</a>。</p></div></div><footer class="page-footer" data-v-7eddb2c4="" data-v-fb8d84c6=""><div class="edit" data-v-fb8d84c6=""><div class="edit-link" data-v-fb8d84c6="" data-v-1ed99556=""><a class="link" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-1ed99556="">Suggest changes to this page <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-1ed99556=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-fb8d84c6=""><!----></div></footer><!----><!--[--><!--[--><!--]--><!--[--><div class="buy-sell-ads" data-v-4ce5ad17=""><div class="bsa-cpc" data-v-4ce5ad17=""></div></div><!--]--><!--]--></div></main></div><!----><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"api_index.md\":\"d2104c47\",\"guide_advanced_composition-api.md\":\"c4a35a0b\",\"guide_advanced_data-fetching.md\":\"b840e67c\",\"guide_advanced_dynamic-routing.md\":\"652f0e44\",\"guide_advanced_extending-router-link.md\":\"9af8914a\",\"guide_advanced_lazy-loading.md\":\"8d710c99\",\"guide_advanced_meta.md\":\"a024ec3d\",\"guide_advanced_navigation-failures.md\":\"57e1a0e2\",\"guide_advanced_navigation-guards.md\":\"7d263b2b\",\"guide_advanced_scroll-behavior.md\":\"84f7daa3\",\"guide_advanced_transitions.md\":\"85553476\",\"guide_essentials_dynamic-matching.md\":\"fa6babaa\",\"guide_essentials_history-mode.md\":\"56f164ed\",\"guide_essentials_named-routes.md\":\"94d29abc\",\"guide_essentials_named-views.md\":\"c0d13d46\",\"guide_essentials_navigation.md\":\"c1db3764\",\"guide_essentials_nested-routes.md\":\"0c92c29e\",\"guide_essentials_passing-props.md\":\"c283ba51\",\"guide_essentials_redirect-and-alias.md\":\"ff823362\",\"guide_essentials_route-matching-syntax.md\":\"8d709abb\",\"guide_index.md\":\"adc6171f\",\"guide_migration_index.md\":\"b3d45cf2\",\"index.md\":\"58761df1\",\"installation.md\":\"80dcd302\",\"introduction.md\":\"e6a9eb47\",\"zh_api_index.md\":\"9540fde2\",\"zh_guide_advanced_composition-api.md\":\"c9cfee63\",\"zh_guide_advanced_data-fetching.md\":\"c83aef48\",\"zh_guide_advanced_dynamic-routing.md\":\"10e27a0f\",\"zh_guide_advanced_extending-router-link.md\":\"4de5dd4e\",\"zh_guide_advanced_lazy-loading.md\":\"bc3ba5ac\",\"zh_guide_advanced_meta.md\":\"9802cc2e\",\"zh_guide_advanced_navigation-failures.md\":\"02c8440d\",\"zh_guide_advanced_navigation-guards.md\":\"2c59c5ad\",\"zh_guide_advanced_scroll-behavior.md\":\"22a11e87\",\"zh_guide_advanced_transitions.md\":\"f4039441\",\"zh_guide_essentials_dynamic-matching.md\":\"e6594e44\",\"zh_guide_essentials_history-mode.md\":\"beb89b31\",\"zh_guide_essentials_named-routes.md\":\"66c05082\",\"zh_guide_essentials_named-views.md\":\"9aae5c1b\",\"zh_guide_essentials_navigation.md\":\"c0faee1f\",\"zh_guide_essentials_nested-routes.md\":\"e1852582\",\"zh_guide_essentials_passing-props.md\":\"030d2081\",\"zh_guide_essentials_redirect-and-alias.md\":\"ea0856be\",\"zh_guide_essentials_route-matching-syntax.md\":\"e907166f\",\"zh_guide_index.md\":\"bb134cde\",\"zh_guide_migration_index.md\":\"c448fcd8\",\"zh_index.md\":\"90ac17e3\",\"zh_installation.md\":\"7a5d9568\",\"zh_introduction.md\":\"6a2f4e36\"}")</script>
    <script type="module" async="" src="static/js/app.47b74ea6.js"></script>
    
  </body>
</html>